<template>
    <view>
        <view class="container">
            <view class="header">
                <image class="background-image" src="/static/img/2.png" mode="aspectFill"></image>
                <view class="search-bar">
                    <picker onChange="bindPickerChange" :value="cityIndex" :range="cities">
                        <view class="picker">{{ cities[cityIndex] }}</view>
                    </picker>
                    <input class="search-input" placeholder="请输入搜索文字" onConfirm="doneSearch" />
                    <ant-button type="primary" inline onTap="doneSearch" className="round">搜索</ant-button>
                </view>
            </view>
        </view>
        <view class="recommend-section" onTap="fjys">
            <view class="section-title">推荐饮食</view>
            <block v-for="(item, index) in tuijian" :key="index">
                <view class="hotel-card">
                    <image class="hotel-image" :src="item.img" mode="aspectFill"></image>
                    <view class="hotel-info">
                        <view class="hotel-name">{{ item.name }}</view>
                        <view class="hotel-type">{{ item.introduce }}</view>
                        <view class="hotel-tags">
                            <text class="tag">{{ item.tags }}</text>
                        </view>
                        <view class="hotel-location">{{ item.address }}</view>
                    </view>
                    <view class="hotel-rating">评分 {{ item.phone }}</view>
                </view>
            </block>
        </view>
        <block v-if="noData">
            <view class="no-more-container">
                <image mode="scaleToFill" src="https://ffa.firstui.cn/uploadfile/240901193015838.png" class="no-more-image" />
                <view class="no-more">暂无更多</view>
            </view>
        </block>
    </view>
</template>

<script>
	import {
		ref,
		onMounted
	} from 'vue';
	import {
		onShow,
		onLoad
	} from '@dcloudio/uni-app';
	import {
		onPullDownRefresh,
		onReachBottom
	} from "@dcloudio/uni-app";

// Page({
//   data: {
//     cities: ['厦门', '北京', '上海','黑龙江','吉林'],
//     cityIndex: 0,
//     hotels: [
//       {
//         name: '特色芒果饭',
//         type: '傣族特色',
//         tags: ['一年四季', '3-7日', '人均30'],
//         location: '云南西双版纳',
//         rating: '5.0',
//         image: 'https://ffa.firstui.cn/uploadfile/240820194807330.png'
//       },
//       {
//         name: '特色芒果饭',
//         type: '傣族特色',
//         tags: ['一年四季', '3-7日', '人均10'],
//         location: '云南西双版纳',
//         rating: '5.0',
//         image: 'https://ffa.firstui.cn/uploadfile/240820194807330.png'
//       },
//       {
//         name: '特色芒果饭',
//         type: '傣族特色',
//         tags: ['一年四季', '3-7日', '人均10'],
//         location: '云南西双版纳',
//         rating: '5.0',
//         image: 'https://ffa.firstui.cn/uploadfile/240820194807330.png'
//       },
//       {
//         name: '特色芒果饭',
//         type: '傣族特色',
//         tags: ['一年四季', '3-7日', '人均10'],
//         location: '云南西双版纳',
//         rating: '5.0',
//         image: 'https://ffa.firstui.cn/uploadfile/240820194807330.png'
//       },
//       {
//         name: '特色芒果饭',
//         type: '傣族特色',
//         tags: ['一年四季', '3-7日', '人均10'],
//         location: '云南西双版纳',
//         rating: '5.0',
//         image: 'https://ffa.firstui.cn/uploadfile/240820194807330.png'
//       },
//     ],
//   },
//   onSwipeChange(e) {
//     this.setData({
//         current: e.detail.current,
//     });
// },
// onChange(current) {
//     this.setData({
//         current,
//     });
// },
//   handleTap(e) {
//     console.log(e);
//     my.alert({
//         title: '暂无此处',
//     });
// },
// bindPickerChange(e) {
//   console.log('picker发送选择改变，携带值为', e.detail.value);
//   this.setData({
//     cityIndex: e.detail.value,
//   });
// },

// });


export default {
    components: {

    },
    // 页面加载时获取推荐列表
    data() {
        return {
            collected: false,
            address: '',
            click: 0,
            createTime: '',
            goodsclass: '',
            goodsid: 0,
            img: '',
            introduce: '',
            name: '',
            phone: '',
            price: 0,
            tags: '',
            tuijian: [],
            // 保存推荐列表
            searchText: '',
            // 保存搜索文本
            addressname: '',
            classname: '',
            searchname: '',
            cities: ['广东', '安徽', '内蒙古', '广西', '吉林', '云南'],
            cityIndex: 0,
            noData: false // 无数据标志
        };
    },
    onLoad() {
        this.loadRecommendations();
    },
    methods: {
        // 更新 searchText 数据
        bindKeyInput(e) {
            this.setData({
                searchText: e.detail.value
            });
            console.log(e.detail.value);
        },

        // 搜索操作
        doneSearch() {
            const { searchText, cityIndex, cities } = this;
            const selectedCity = cities[cityIndex]; // 获取选择的城市

            uni.request({
                url: url + '/searchGoods',
                method: 'POST',
                data: {
                    addressname: selectedCity,
                    // 使用选择的城市进行筛选
                    searchname: searchText,
                    classname: '饮食' // 使用搜索文本进行筛选
                },
                headers: {
                    'content-type': 'application/json'
                },
                dataType: 'json',
                success: (res) => {
                    console.log('Request succeeded:', res); // 检查返回的数据
                    if (res.data && res.data.data) {
                        this.setData({
                            tuijian: res.data.data,
                            // 更新 tuijian 列表，触发页面重新渲染
                            noData: res.data.data.length === 0 // 根据结果判断是否有数据
                        });
                    } else {
                        this.setData({
                            noData: true
                        }); // 没有返回数据时显示暂无更多
                        console.error('No data found in response:', res);
                    }
                },
                fail: (error) => {
                    console.error('Request failed', error);
                    this.setData({
                        noData: true
                    }); // 请求失败时也显示暂无更多
                }
            });
        },

        loadRecommendations() {
            const { cityIndex, cities } = this;
            const selectedCity = cities[cityIndex]; // 获取选择的城市

            uni.request({
                url: url + '/searchGoods',
                method: 'POST',
                data: {
                    addressname: selectedCity,
                    // 使用选择的城市进行筛选
                    classname: '饮食',
                    searchname: ''
                },
                headers: {
                    'content-type': 'application/json'
                },
                dataType: 'json',
                success: (res) => {
                    if (res.data.data) {
                        this.setData({
                            tuijian: res.data.data,
                            noData: res.data.data.length === 0 // 根据结果判断是否有数据
                        });
                        console.log(res.data.data);
                    } else {
                        this.setData({
                            noData: true
                        }); // 没有返回数据时显示暂无更多
                    }
                },
                fail: (error) => {
                    console.error('Request failed', error);
                    this.setData({
                        noData: true
                    }); // 请求失败时也显示暂无更多
                }
            });
        },

        // 处理城市选择改变
        bindPickerChange(e) {
            console.log('picker发送选择改变，携带值为' + e.detail.value);
            this.setData({
                cityIndex: e.detail.value
            });
            console.log('选择的城市为' + this.cities[this.cityIndex]);

            // 根据新选择的城市重新加载推荐列表
            this.loadRecommendations();
        },

        // 处理跳转
        fjys() {
            uni.navigateTo({
                url: '/pages/difangyinshia/difangyinshia'
            });
        }
    }
};
</script>
<style>
.header {
    position: relative;
}

.background-image {
    width: 100%;
    height: 159px;
}

.search-bar {
    display: flex;
    align-items: center;
    position: absolute;
    bottom: 20px;
    width: 100%;
    padding: 0 10px;
}

.picker {
    flex: 1;
    margin-right: 10px;
}

.search-input {
    display: flex;
    margin-right: 10px;
    border-radius: 10px;
    width: 240px;
}
.search-button {
    display: flex;
    border-radius: 20px;
    background-color: #3a94ee;
    width: 48px;
    height: 35px;
}
.recommend-section {
    padding: 10px;
}

.section-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
}

.hotel-card {
    display: flex;
    margin-bottom: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    overflow: hidden;
}

.hotel-image {
    width: 102px;
    height: 102px;
}

.hotel-info {
    padding: 10px;
    flex: 1;
}

.hotel-name {
    font-size: 16px;
    font-weight: bold;
}

.hotel-type,
.hotel-location,
.hotel-price {
    font-size: 14px;
    color: #666;
}

.hotel-tags .tag {
    margin-right: 5px;
    background-color: #eee;
    padding: 2px 5px;
    border-radius: 3px;
    color: #ee3a49;
}

.hotel-rating {
    padding: 10px;
    font-size: 14px;
    color: #f60;
}
.no-more-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%; /* 或根据需要设置合适的高度 */
    text-align: center;
}

.no-more-image {
    width: 150rpx; /* 根据需要调整图片大小 */
    height: 150rpx; /* 根据需要调整图片大小 */
    margin-bottom: 20rpx; /* 图片与文字之间的间距 */
    margin-top: 170px;
}
.no-more {
    font-size: 32rpx; /* 根据需要调整字体大小 */
    color: #999; /* 根据需要调整字体颜色 */
}

</style>
